<template>
  <div class="InventoryManagement">
    <div class="cus-title">
      <h4>云仓管理</h4>
    </div>
    <p class="cus-ment">
      <span>{{ name ? name : '' }}</span><span>{{
        addressDetail ? addressDetail : ''
      }}</span>
    </p>
    <div class="key-search">
      <el-form :model="bindForm">
        <el-row :gutter="24">
          <el-col :span="10">
            <el-form-item label="商品名称:">
              <el-col
                :span="15"
              ><el-input
                v-model="bindForm.commodityName"
                placeholder="输入商品名称"
              /></el-col>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="商品分类:">
              <el-col :span="8">
                <el-select
                  v-model="bindForm.commodityType.typeOne"
                  fliterable
                  clearable
                  @change="getCommodityTypeListByid"
                >
                  <el-option
                    v-for="(item, index) in goodsaTypeList"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-col>
              <el-col :span="8">
                <el-select
                  v-model="bindForm.commodityType.typeTwo"
                  filterable
                  clearable
                >
                  <el-option
                    v-for="(item, index) in goodsbTypeList"
                    :key="index"
                    :value="item.value"
                    :label="item.label"
                  />
                </el-select>
              </el-col>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="10">
            <el-form-item label="库存状态:">
              <el-col :span="15">
                <el-select v-model="bindForm.commodityState" clearable>
                  <el-option label="库存不足" value="0" />
                  <el-option label="库存正常" value="1" /> </el-select></el-col>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item class="sub-footer">
          <el-button type="primary" @click="screeing">筛选</el-button>
          <el-button
            type="primary"
            @click="visible = isSelect = true"
          >添加商品</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table
      ref="table"
      v-loading="loading"
      :data="Bindata"
      class="cus-table"
      @selection-change="handelChange"
    >
      <el-table-column type="selection" />
      <el-table-column label="商品" align="center">
        <template slot-scope="scope">
          <div class="cus-column-commodity">
            <div class="left">
              <!--              <img :src="scope.row.picUrl" alt="">-->
              <TableColumnGoodsImage :src="scope.row.picUrl" :img-size="'60px'" />
            </div>
            <div class="right">
              <span>{{ scope.row.goodsName }}</span>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="类型" prop="goodsType" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.goodsType == 'lease'">租赁</span>
          <span v-else>售卖</span>
        </template>
      </el-table-column>
      <el-table-column label="库存" prop="goodsCount" align="center">
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.goodsCount"
            disabled
            style="width: 100px"
          />
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <div class="operation">
            <el-button
              type="text"
              @click="
                $router.push({
                  name: 'SPKManage',
                  query: {
                    p:$ed({
                      row: scope.row
                    })
                  }
                })
              "
            >编辑库存</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="footer">
      <div class="footer-left">
        <el-button
          plain
          size="small"
          type="primary"
          @click="$refs.table.toggleAllSelection()"
        >全选</el-button>
        <el-button
          plain
          size="small"
          type="primary"
          @click="handelallAdd"
        >批量添加库存</el-button>
        <el-button
          plain
          size="small"
          type="danger"
          @click="handelRemove"
        >删除</el-button>
      </div>
      <el-pagination
        class="pagination-right"
        layout="total, sizes, prev, pager, next, jumper"
        :current-page="pagination.pageIndex"
        :page-sizes="[15, 30, 50, 100]"
        :page-size="pagination.pageSize"
        :total="pagination.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <!-- 商品列表 -->
    <el-dialog
      title="选择商品"
      :before-close="handelClose"
      :visible.sync="visible"
      width="900px"
    >
      <add-cloud-goods
        :is-select="isSelect"
        :warehouse-id="cloudStockId"
        @handelAddRows="handelAddRows"
        @handelAllSelect="handelAllSelect"
        @close="handelClose"
      />
    </el-dialog>
    <!-- 批量添加库存 -->
    <el-dialog
      :visible.sync="addVisible"
      title="批量添加库存"
      :before-close="handelBefore"
    >
      <div class="addVisible">
        <div class="top">
          <span>添加库存数量</span><el-input ref="warehouseCount" v-model.trim="warehouse.count" @keyup.native="changeWarehouseCount" />
        </div>
        <p class="bottom">所选商品库存会根据该数量增加，包含规格的库存</p>
        <el-button type="primary" @click="updateEidt">修改</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
/** 仓库管理 */
import {
  InventoryManagement,
  addCommodity,
  delWarehouse,
  WarehouseBatch
} from '@/api/customAPI/shop/GloudWarehouse'
import AddCloudGoods from '@/components/AddCloudGoods'
import TableColumnGoodsImage from '@/components/TableColumnGoodsImage'
import { getCommodityCategoryList } from '@/api/commodity'
export default {
  name: 'InventoryManagement',
  components: {
    AddCloudGoods,
    TableColumnGoodsImage
  },
  data() {
    return {
      name: '',
      addressDetail: '',
      cloudStockId: '',
      loading: false,
      isSelect: false,
      visible: false,
      addVisible: false,
      bindForm: {
        warehouseId: '',
        commodityName: '',
        commodityType: {
          typeOne: '',
          typeTwo: ''
        },
        commodityState: ''
      },
      pagination: {
        pageIndex: 1,
        pageSize: 15,
        total: 0
      },
      goodsId: [],
      Bindata: [],
      selectData: [],
      // 批量修改
      warehouse: {
        commotdityId: '',
        count: '',
        cloudId: ''
      },
      // 获取商品搜索
      goodsaTypeList: [],
      goodsbTypeList: [],
      optionsTow: []
    }
  },

  created() {
    const param = this.$dd(this.$route.query.p)
    console.log(param)
    this.name = param.name
    this.addressDetail = param.addressDetail
    this.cloudStockId = param.cloudId
    this.bindForm.warehouseId = param.cloudId
    this.warehouse.cloudId = param.cloudId
    this.loadding()
    this.getCommodityTypeList()
  },
  mounted() {
    const param = this.$dd(this.$route.query.p)
    this.bindForm.warehouseId = param.cloudId
    this.loadding()
    this.getCommodityTypeList()
  },
  activated() {
    const param = this.$dd(this.$route.query.p)
    this.bindForm.warehouseId = param.cloudId
    // this.bindForm.warehouseId = sessionStorage.getItem('warehouseId')
    this.loadding()
    this.getCommodityTypeList()
  },
  methods: {
    changeTypeOne(v) {
      // this.optionsTow = []
      // this.bindForm.commodityType.typeTwo = ''
      // this.goodsbTypeList.forEach(inf => {
      //   if (inf.value - 1 === v) {
      //     this.optionsTow.push(inf)
      //   }
      // })
    },
    changeWarehouseCount() {
      if (/^[0-9]*[1-9][0-9]*$/g.test(this.warehouse.count)) {
        if (this.warehouse.count < 0) {
          this.warehouse.count = 0
        }
        if (this.warehouse.count > 100000) {
          this.warehouse.count = 100000
        }
      } else {
        this.warehouse.count = null
      }
    },
    isNumberCount() {
      if (typeof this.warehouse.count == 'number') {
        return
      } else {
        return this.$message.error('请输入数字')
      }
    },
    // 批量删除
    handelRemove() {
      if (this.selectData.length > 0) {
        var params = this.selectData.map(inf => inf.goodsId)
        this.$confirm('你确定要删除吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(result => {
            delWarehouse({ ids: params, cloudId: this.cloudStockId }).then(result => {
              this.$message.success('成功')
              this.loadding()
            })
          })
          .catch(err => {
            console.log(err)
          })
      } else {
        this.$message.warning('请先选择数据')
      }
    },
    handelBefore(done) {
      this.warehouse.count = ''
      done()
    },
    /** 批量添加库存 */
    updateEidt() {
      if (this.selectData.length > 0) {
        this.warehouse.commotdityId = this.selectData
          .map(inf => inf.goodsId)
          .toString()
        console.log(this.warehouse.count)
        if (this.warehouse.count) {
          const data = this.$XEUtils.clone(this.warehouse, true)
          data.count = parseInt(data.count)
          WarehouseBatch(data)
            .then(result => {
              this.$message.success('成功')
              this.addVisible = false
              this.loadding()
            })
            .catch(err => {
              console.log(err)
            })
        } else {
          this.$message.error('添加库存数量不能为空')
        }
      } else {
        this.$message.warning('请先选择数据')
      }
    },
    /** 表格多选 */
    handelChange(v) {
      console.log(v)
      this.selectData = v
    },
    /** 批量添加 */
    handelallAdd() {
      if (this.selectData.length > 0) {
        this.addVisible = true
      } else {
        this.$message.warning('请先选择数据')
      }
    },
    /** 筛选 */
    screeing() {
      this.loadding()
    },
    // 初始化
    loadding() {
      this.loading = true
      this.bindForm.page = this.pagination.pageIndex
      this.bindForm.limit = this.pagination.pageSize
      console.log(this.bindForm)
      InventoryManagement(this.bindForm)
        .then(result => {
          this.Bindata = result.data.data.data
          this.pagination.total = result.data.data.total
          this.loading = false
        })
        .catch(err => {
          console.log(err)
        })
    },
    /** 商品对话框多选 */
    handelAllSelect(data) {
      const list = data.map(inf => inf.id)
      console.log(list)
      addCommodity({
        warehouseId: this.bindForm.warehouseId,
        commodityId: list
      }).then(result => {
        this.$message.success('成功')
        this.visible = false
        this.loadding()
      })
    },
    // 关闭商品对话框
    handelClose() {
      this.visible = false
    },
    handelAddRows(row) {
      this.goodsId.push(row.goodsId)
      addCommodity({
        warehouseId: this.bindForm.warehouseId,
        commodityId: this.goodsId
      }).then(result => {
        this.$message.success('成功')
        this.goodsId = []
        this.visible = false
        this.loadding()
      })
    },
    handleCurrentChange(index) {
      this.pagination.pageIndex = index
      this.loadding()
    },
    handleSizeChange(size) {
      this.pagination.pageSize = size
      this.loadding()
    },
    /* goodsTypeList() {
      goodsTypeTreeList().then(result => {
        this.goodsaTypeList = []
        this.goodsbTypeList = []
        result.data.data.forEach((inf, index) => {
          this.goodsaTypeList.push({
            value: inf.value,
            label: inf.label
          })
          inf.children.forEach(che => {
            this.goodsbTypeList.push({
              value: che.value,
              label: che.label,
              id: inf.index
            })
          })
        })
      })
    },*/
    getCommodityTypeList() {
      getCommodityCategoryList().then(response => {
        this.goodsaTypeList = response.data.data
      })
    },
    getCommodityTypeListByid(data) {
      this.bindForm.commodityType.typeTwo = ''
      if (this.bindForm.commodityType.typeOne !== '') {
        this.goodsaTypeList.forEach(item => {
          if (item.value === data) {
            this.goodsbTypeList = item.children
          }
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.InventoryManagement {
  padding: 50px 100px;
  .cus-ment {
    span:first-child {
      font-size: 1.3rem;
    }
    span:last-child {
      margin-left: 20px;
      font-size: 0.6rem;
    }
  }
  .key-search {
    padding: 40px 20px 10px 20px;
    background: #f3f3f3;
    border-radius: 5px;
    margin-top: 40px;
    ::v-deep.el-form {
      .el-form-item__label {
        width: 80px;
      }
      .sub-footer {
        margin-top: 20px;
        .el-button:first-child {
          margin-left: 93px;
        }
        .el-button {
          width: 100px;
        }
      }
    }
  }
  .cus-table {
    .cus-column-commodity {
      display: flex;
      align-items: center;
      .left {
        width: 60px;
        height: 60px;
      }
      .right {
        margin-left: 30px;
      }
    }
  }
  .footer {
    display: flex;
    justify-content: space-between;
    margin: 50px 0px 100px 0px;
    .footer-left {
      ::v-deep.el-button {
        width: 100px;
        margin: 0px;
      }
    }
  }
  .addVisible {
    .top {
      span {
        display: inline-block;
        width: 110px;
      }
      .el-input {
        width: 200px;
      }
    }
    .bottom {
      color: gray;
      padding-left: 110px;
    }
    .el-button {
      margin-top: 50px;
      margin-left: 110px;
    }
  }
}
</style>
